<template>
  <el-form
    ref="formRef"
    @submit.native.prevent
    :model="ruleForm1"
    :rules="rules"
    label-width="120px"
    class="creat-pub"
    status-icon
  >
    <el-form-item
      label="手机号码"
      prop="phone"
      class="phone-form"
      style="display: flex; justify-content: center; width: 80%"
    >
      <el-input
        v-model="ruleForm1.phone"
        style="width: 260px"
        maxlength="11"
        placeholder="请输入手机号"
      />
    </el-form-item>
    <el-form-item class="form-footer-btn">
      <el-button type="primary" @click="submitForm(formRef)" color="#165dff">
        下一步
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  setup(prop, { emit }) {
    const ruleForm1 = reactive({
      phone: '',
    });
    const rules = reactive({
      phone: [
        {
          required: true,
          message: '请输入手机号',
          trigger: 'blur',
        },
      ],
    });
    const formRef = ref();

    function submitForm(ruleForm) {
      ruleForm.validate((valid) => {
        if (valid === true) {
          emit('upChange', 1, 2, ruleForm1.phone); // 输入手机号提交成功
        } else {
          return false;
        }
      });
    }
    return {
      ruleForm1,
      rules,
      formRef,
      submitForm,
    };
  },
});
</script>
<style lang="scss" scope>
.creat-pub {
  margin-top: 60px;
  position: relative;
  width: 100%;
  .el-form-item__content {
    flex: none !important;
    margin: 0 !important;
  }
  .form-footer-btn {
    display: flex;
    justify-content: end;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    margin: 0;
    border-top: 1px solid #e5e6eb;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 16px;
  }
}
</style>
